<template>
  <div>
    <group>
      <form-preview :header-label="$t('金额(元)')" :header-value="price" :body-items="list" :footer-buttons="buttons"></form-preview>
    </group>
    <toast v-model="isCancel" type="text" :time="1500" is-show-mask text="取消成功" position="bottom"></toast>
    <toast v-model="isDelete" type="text" :time="1500" is-show-mask text="删除成功" position="bottom"></toast>
  </div>
</template>

<script>
  import {Toast,Confirm ,Group,Divider,FormPreview,TransferDomDirective as TransferDom } from 'vux'
  const _this=this
  export default {
    directives: {
      TransferDom
    },
    props:['orderData'],
    data(){
      return{
        price:'',           //总价格
        list: [],           //订单列表
        showCancel:false,    //是否显示确认框
        buttons: [],          //添加button
        opencoid:'',           //用于取消订单的id
        isCancel:false,
        isDelete:false
      }
    },
    mounted(){
      this.initdata()
    },
    methods:{
      initdata(){
        let orderdata=this.orderData;
        this.changeButton(orderdata.index)      //添加按钮
        this.getOpencoid(orderdata.oid)
        this.price=orderdata.price
        this.price=this.price.substring(this.price.length-2,0)
        this.orderData.price=this.price
        let type,loc,name,time,date
        type={label:'服务名称', value:orderdata.service_name}
        loc={label:'病患地址', value:orderdata.loc}
        name={label:'病患姓名', value:orderdata.patient_name}
        time={label:'订单次数', value:orderdata.time}
        let datetime =orderdata.datetime.split('.')
        date={label:'下单时间', value:datetime[0]}
        this.list.push(type);
        this.list.push(name);
        this.list.push(time);
        this.list.push(date)
        this.list.push(loc);
      },
      conf(){           //取消未付款订单
        let _this=this
        this.$vux.confirm.show({
          title: '是否删除订单',
          // 组件除show外的属性
          onCancel () {
            _this.$vux.confirm.hide()
          },
          onConfirm () {
            let data={user_type:1}
            _this.Ajax('post','/Order/Order/cancel/coid/'+_this.opencoid,data,(res)=>{
              if(res.status=='success'){
                _this.isCancel=true
                console.log(this.isCancel)
                setTimeout(()=>{
                  _this.$router.go(0)
                },1500)
              }
            })
          }
        })
      },
      check(){                //跳转至订单流程详情
        this.$router.push({
          path:'/order_process',
          query:this.orderData
        })
      },
      //预约下一次
      appoint(){
        this.$router.push({
          path:'/order_appoint',
          query:{
            oid:this.orderData.oid,
            time:this.orderData.time
          }
        })
      },
      //支付未付款订单
      payOrder(){
          this.$router.push({
            path:'/order_details/order_pay/',
            query:this.orderData
          })
      },
      changeButton(index){
        switch(index){
          case 0:
            let cancel={
              style: 'default',
              text: '取消',
              onButtonClick:this.conf
            }
            let pay={
              style: 'primary',
              text: this.$t('付款'),
              onButtonClick: this.payOrder
            }
            this.buttons=[cancel,pay]
            break;
          case 1:
            if(this.orderData.time>1){
              let data={
                order_type:1,
                user_type:1
              }
              this.Ajax('post','/Order/order/detail/oid/'+this.orderData.oid,data,(res)=>{
                console.log(res)
                if(!res.openCoid){
                  let yuyue={
                    style:'primary',
                    text: this.$t('预约下一次'),
                    onButtonClick:this.appoint
                  }
                  let check={
                    style: 'primary',
                    text: this.$t('查看详情'),
                    onButtonClick: this.checkOid
                  }
                  this.buttons=[check,yuyue]
                }else{
                  let checkorder={
                    style: 'primary',
                    text: this.$t('查看详情'),
                    onButtonClick: this.checkOid
                  }
                  let check={
                    style:'primary',
                    text: this.$t('查看进程'),
                    onButtonClick:this.check
                  }
                  this.buttons=[checkorder,check]
                }
              })
            }else{
              let check={
                style:'primary',
                text: this.$t('查看进程'),
                onButtonClick:this.check
              }
              this.buttons=[check]
            }
            break;
          case 2:
            let del={
              style: 'default',
              text: '删除',
              onButtonClick:this.delOid
            }
            let check={
              style: 'primary',
              text: this.$t('查看'),
              onButtonClick: this.checkOid
            }
            this.buttons=[del,check]
            break;
        }
      },
      //查看父订单详情
      checkOid(){
        this.$router.push({
          path:'/order_oid_details',
          query:this.orderData
        })
      },
      //删除已完成父订单
        delOid(){
            let oid=this.orderData.oid
          let _this=this
          this.$vux.confirm.show({
            title: '是否删除订单',
            // 组件除show外的属性
            onCancel () {
              _this.$vux.confirm.hide()
            },
            onConfirm () {
              let data={user_type:1}
              this.Ajax('delete','/Order/Order/order/oid/'+oid,data,(res)=>{
                if(res.status=='success'){
                  _this.isDelete=true
                  setTimeout(()=>{
                    _this.$router.go(0)
                  },1500)
                }
              })
            }
          })

        },
      //获取需要取消未付款订单的coid
      getOpencoid(oid){
        let data={
          user_type:1,
          order_type:1
        }
        this.Ajax('post','/Order/order/detail/oid/'+oid,data,(res)=>{
          this.opencoid=res.openCoid
        })
      }
    },
    components:{
      Toast,
      Confirm ,
      Group,
      Divider,
      FormPreview
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
